<template>
	<view class="tui-product__item" :class="{'tui-product__item-show-border':isBorder}" hover-class="tui-hover"
		:hover-start-time="150" v-for="(item,index) in dataList" :key="index" @tap="detail(item)">
		<view class="tui-product__img">
			<image :src="ossUrl + item.releaseImgs[0]" class="tui-product__img"></image>
			<tui-tag type="white" size="20rpx" class="tui-product__address" shape="circle" :plain="true"
				padding="5px 8px" border="unset" v-if="isPos">
				<tui-icon name="gps" :size="20" unit="rpx" color="#fff" margin="0 8rpx 0 0"></tui-icon>
				{{item.poi ? item.poi.businessAreaName : '未知'}}
			</tui-tag>
			<tui-tag type="white" size="20rpx" class="tui-product__address" shape="circle" :plain="true"
				padding="5px 8px" border="unset" v-if="isDate">
				<tui-icon name="clock" :size="20" unit="rpx" color="#fff" margin="0 8rpx 0 0"></tui-icon>
				2024-11-02
			</tui-tag>
		</view>
		<view class="tui-product__content">
			<view class="tui-product__title">{{ item.releaseContent || '' }}</view>
			<view class="thorui-flex__between">
				<view style="display: flex;align-items: center;font-size: 30rpx;color: gray;">
					<image v-if="!item.avatar"
						src="https://dn-coding-net-production-pp.codehub.cn/270e73de-2548-406b-9e1c-c0c8481dff90.png"
						class="u-nickname__img" ></image>
					<image v-else :src="item.avatar" class="u-nickname__img"></image>
					{{item.nickname}}
				</view>
				<view class="thorui-flex__between">
					<tui-tag type="gray" size="30rpx" shape="circle" :plain="true" padding="0"
						margin="0 10rpx 0 0" v-if="isCommentNum">
						<image src="/static/user/icon_pinglun@2x.png" class="icon-pinglun"></image>
						{{item.commentNumber}}
					</tui-tag>
					<view style="display: flex;align-items: center;font-size: 30rpx;color: gray;" @tap.stop="collect(item.id,item.isCollection)">
						<tui-icon name="like" size="30rpx" margin="0 6rpx 0 0"></tui-icon>
						<text>{{item.quantity}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DynamicItem',
		emits: ['clickDetail'],
		props: {
			// 数据列表
			dataList: {
				type: Array,
				default: []
			},
			//是否显示边框
			isBorder: {
				type: Boolean,
				default: false
			},
			// 是否显示位置
			isPos: {
				type: Boolean,
				default: true
			},
			// 是否显示日期
			isDate: {
				type: Boolean,
				default: false
			},
			// 是否显示评论数
			isCommentNum: {
				type: Boolean,
				default: false
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			}
		},
		data() {

		},
		methods: {
			detail(dynamic) {
				this.$emit("clickDetail", {
					dynamic
				})
			}
		}
	};
</script>

<style scoped>
	.tui-product__item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 28rpx;
		overflow: hidden;
		transition: all 0.15s linear;
	}

	.tui-product__item-show-border {
		border: 1rpx solid #cccccc47;
	}

	.tui-product__img {
		position: relative;
		width: 100%;
		display: block;
		background-color: #F1F1F1;
	}

	.tui-product__address {

		background-color: #2e2e2e5c;
		position: absolute;
		bottom: 20rpx;
		left: 16rpx;
		border-radius: 160rpx;
	}

	.tui-product__address text {
		font-size: 20rpx;
		color: #fff;
		margin-left: 8rpx;
	}

	.tui-product__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-product__title {
		color: #2e2e2e;
		font-size: 30rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: 600;
		margin-bottom: 18rpx;
	}

	/* 头像 */
	.u-nickname__img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
	}
	
	.icon-pinglun {
		width: 30rpx;
		height: 30rpx;
	}
	
	.tui-tag {
		line-height: unset;
	}
</style>